<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('校园疫情防控')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-sm-4">
			<div class="ibox">
				<div class="ibox-content">
					<h5 class="m-b-md">本日访问量</h5>
					<h2 class="text-navy">
						<i class="fa fa-play fa-rotate-270"></i>
						<span id="ipFlowDay">0</span>
					</h2>
					<small>统计方式：IP</small>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox">
				<div class="ibox-content">
					<h5 class="m-b-md">本日访问量</h5>
					<h2 class="text-navy">
						<i class="fa fa-play fa-rotate-270"></i>
						<span id="uvFlowDay">0</span>
					</h2>
					<small>统计方式：UV</small>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox">
				<div class="ibox-content">
					<h5 class="m-b-md">本日访问量</h5>
					<h2 class="text-navy">
						<i class="fa fa-play fa-rotate-270"></i>
						<span id="pvFlowDay">0</span>
					</h2>
					<small>统计方式：PV</small>
				</div>
			</div>
		</div>
	</div>
	<!--<div class="row">
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5 class="m-b-md">本周访问量</h5>
                    <h2 class="text-navy">
                        <i class="fa fa-play fa-rotate-270"></i>
                        <span id="ipFlowWeek">0</span>
                    </h2>
                    <small>统计方式：IP</small>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5 class="m-b-md">本周访问量</h5>
                    <h2 class="text-navy">
                        <i class="fa fa-play fa-rotate-270"></i>
                        <span id="uvFlowWeek">0</span>
                    </h2>
                    <small>统计方式：UV</small>
                 </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h5 class="m-b-md">本周访问量</h5>
                    <h2 class="text-navy">
                        <i class="fa fa-play fa-rotate-270"></i>
                        <span id="pvFlowWeek">0</span>
                    </h2>
                    <small>统计方式：PV</small>
                </div>
            </div>
        </div>
    </div>-->
	<div class="row">
		<div class="col-sm-4">
			<div class="ibox">
				<div class="ibox-content">
					<h5 class="m-b-md">本月访问量</h5>
					<h2 class="text-navy">
						<i class="fa fa-play fa-rotate-270"></i>
						<span id="ipFlowMonth">0</span>
					</h2>
					<small>统计方式：IP</small>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox">
				<div class="ibox-content">
					<h5 class="m-b-md">本月访问量</h5>
					<h2 class="text-navy">
						<i class="fa fa-play fa-rotate-270"></i>
						<span id="uvFlowMonth">0</span>
					</h2>
					<small>统计方式：UV</small>
				</div>
			</div>
		</div>
		<div class="col-sm-4">
			<div class="ibox">
				<div class="ibox-content">
					<h5 class="m-b-md">本月访问量</h5>
					<h2 class="text-navy">
						<i class="fa fa-play fa-rotate-270"></i>
						<span id="pvFlowMonth">0</span>
					</h2>
					<small>统计方式：PV</small>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<div class="echarts" id="echarts-line-chart"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">

	$(function(){
		initIndexFlow();
		initEcharts();
	})

	function initIndexFlow(){
		$.ajax({
			url:"/api/flow/findFlow",
			type:"get",
			success:function(flow){
				//对传过来的json字符串转化为json对象 等同于 JSON.parse(data);
				$("#ipFlowDay").html(flow.ipFlowDay);
				// $("#ipFlowWeek").html(flow.ipFlowWeek);
				$("#ipFlowMonth").html(flow.ipFlowMonth);
				$("#uvFlowDay").html(flow.uvFlowDay);
				// $("#uvFlowWeek").html(flow.uvFlowWeek);
				$("#uvFlowMonth").html(flow.uvFlowMonth);
				$("#pvFlowDay").html(flow.pvFlowDay);
				// $("#pvFlowWeek").html(flow.pvFlowWeek);
				$("#pvFlowMonth").html(flow.pvFlowMonth);
			}
		})
	}

	//图表的初始化
	var echarts = echarts.init(document.getElementById('echarts-line-chart'));

	function initEcharts(){
		echarts.clear();
		echarts.showLoading({text: '正在努力的读取数据中...'});
		$.ajax({
			url:"/api/echarts/flowLine",
			type:"get",
			success:function(data){
				//对传过来的json字符串转化为json对象 等同于 JSON.parse(data);
				var option = eval("("+data+")");
				echarts.setOption(option);
				echarts.hideLoading();
			}
		})
	}

	$(window).resize(echarts.resize);
</script>
</body>
</html>
